<template>
  <div style="height: 240px" ref="echartss">
    echart
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  //父组件传来的数据
  props: {
    chartData:{
      //类型为对象 
      type:Object,
      default() {
        return {
          xData: [],
          series: []
        }
      }
    },
    // 判断是否有坐标轴的格式
    isAxisChart: {
      type: Boolean,
      //由于大部分的都有坐标轴因此默认值为true
      default: true
    }
  },
  data() {
    return {
      echart: null,
      //有坐标轴的选项
      axisOption:{
        //图例
        legend:{
          //图例字体颜色
          textStyle: {
            color: '#333'
          },
        },
         grid:{
            bottom :'25px'
          },
          //悬浮提示
          tooltip: {
            trigger: 'axis'
          },
        xAxis:{
          type: 'category',
          data: [],
           //x轴线
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          },
          //x轴文字颜色
          axisLabel: {
            color: '#333'
          }
        },
         yAxis: [
          {
            type: 'value',
            axisLine: {
              //y轴线
              lineStyle: {
                color: '#17b3a3'
              }
            },
          }
        ],
         color: ['#0f78f4','#dd536b','#9462e5','#a6a6a6','#e1bb22','#39c362','#3ed1cf'],
        //通过series来定义图表的类型
        series: []
      },
      //没有坐标轴的选项
      normalOption:{
         color: ['#0f78f4','#dd536b','#9462e5','#a6a6a6','#e1bb22','#39c362','#3ed1cf'],
         tooltip: {
          trigger: 'item'
        },
        series: []
      }
    }
  },
  //通过计算属性决定返回的不同的对象
  computed: {
    option(){
      //判断isAxisChart 是的话返回axisOption 不是的话返回normalOption
      return this.isAxisChart ? this.axisOption : this.normalOption
    },
    isCollapse(){
      return this.$store.state.tab.isCollapse
    }
  },
  methods: {
    initChart(){
        //初始化
        this.initChartData()
        //存在的话就不需要初始化
        if(this.echart){
          this.echart.setOption(this.option)
        }
        //不存在的话就需要取到dom中的echartss 在进行初始化
        else{
          this.echart = echarts.init(this.$refs.echartss)
          this.echart.setOption(this.option)
        }
    },
    //根据图表类型初始化图表数据
    initChartData(){
      //判断图表 如果是有坐标轴的图表该如何去做 不是的话又如何去做
      //如果是的话
      if(this. isAxisChart){
        //定义的x轴部分就等于传进来的x轴数据
      this.axisOption.xAxis.data = this.chartData.xData
      this.axisOption.series = this.chartData.series
      }else
      {
        this.normalOption.series = this.chartData.series
      }
    },
    //根据窗口自适应
    chartResize() {
      this.echart ? this.echart.resize() : ''
      console.log('缩放了');
    }
  },
  //注册事件
  mounted() {
    window.addEventListener('resize', this.chartResize)
  },
   //移除事件避免内存泄漏
  destroyed() {
    window.removeEventListener('resize', this.chartResize)
  },
  watch:{
    chartData:{
      //用深度监听chartData的变化
      handler: function(){
        this.initChart()
      },
      deep:true
    },
    isCollapse() {
      setTimeout(()=>{
        this.chartResize()
      },300)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>